import { useState, useEffect, useRef } from "react";
import CamundaAPI from "@/api/CamundaApi.js";
import Variable from "./Variable.jsx";
import Detail from "@/components/Detail.jsx";
import EditText from "@/components/EditText.jsx";
import {
  PlusOutlined,
  CloseOutlined,
  CaretRightOutlined,
} from "@ant-design/icons";
import useModalHooks from "@/hooks/ModalHooks";
import CompleteTask  from './CompleteTask.jsx'
import { Modal, Space, Button } from "antd";
function TaskInfo(props) {
  const taskId = props.taskId;
  const onClose = props.onClose ? props.onClose : () => {};
  const [task, setTask] = useState({});
  const [processInstanceId, setProcessInstanceId] = useState("");
  const [executionId, setExecutionId] = useState("");
  const detail = useRef([]);
  const [candidates, setCandidates] = useState([]);
  const [newCandidate, setNewCandidate] = useState("");
  const [showAddCandidate, setShowAddCandidate] = useState(false);

  const {
    modalVisible: modalVisibleForCompleteTask,
    setModalVisible: setModalVisibleForCompleteTask,
    openModal: openModalForCompleteTask,
    closeModal: closeModalForCompleteTask,
  } = useModalHooks();

  function changeAssignee(v) {
    CamundaAPI.addUserToTask({
      taskId,
      assignee: v,
    }).then((r) => {
      Modal.success({
        title: "Assignee be changed successful",
        centered: true,
        okText: "确认",
        width: 700,
        onOk() {
          // 弹出登录弹框
        },
      });
    });
  }

  function addCandidate(v) {
    CamundaAPI.addUserToTask({
      taskId,
      candidates: [v],
    }).then((r) => {
      setCandidates([...candidates, v]);
      setShowAddCandidate(false);
      Modal.success({
        title: "Candidate be added successful",
        centered: true,
        okText: "确认",
        width: 700,
        onOk() {},
      });
    });
  }

  function removeCandidate(v) {
    CamundaAPI.removeUserToTask({
      taskId,
      candidates: [v],
    }).then((r) => {
      candidates.splice(candidates.indexOf(v), 1);
      setCandidates([...candidates]);
      Modal.success({
        title: "Candidate be removed successful",
        centered: true,
        okText: "确认",
        width: 700,
        onOk() {},
      });
    });
  }

  function pageInit(taskId) {
    CamundaAPI.queryTaskByTaskId(taskId).then((r) => {
      const assignDom = (
        <EditText
          value={r.result.taskAssignee}
          cb={(v) => {
            changeAssignee(v);
          }}
        >
          {" "}
        </EditText>
      );

      detail.current = [
        { key: "ID", value: r.result.taskId },
        { key: "processInstanceId", value: r.result.processInstanceId },
        { key: "executionId", value: r.result.executionId },
        { key: "Start Time", value: r.result.taskStartTime },
        { key: "Assignee", value: assignDom },
        { key: "End Time", value: r.result.taskEndTime },
      ];

      setTask(r.result);
      setProcessInstanceId(r.result.processInstanceId);
      setExecutionId(r.result.executionId);
      setCandidates(r.result.candidates);
    });
  }

  useEffect(() => {
    pageInit(props.taskId);
  }, []);

  return (
    <div>
      <div style={{ marginBottom: "16px" }}>
        <Button
          type="primary"
          size="small"
          icon={<CaretRightOutlined />}
          onClick={() => {
            openModalForCompleteTask();
          }}
        ></Button>
      </div>
      <Detail column={1} data={detail.current}></Detail>

      <div className="callout callout-success">
        <h3>
          Candidate {/* {JSON.stringify(candidates)} */}
          <PlusOutlined
            onClick={() => {
              setNewCandidate("");
              setShowAddCandidate(true);
            }}
          />
        </h3>

        <Space>
          {candidates.map((item) => (
            <span>
              {item}
              <CloseOutlined
                style={{ color: "#1677ff", cursor: "pointer" }}
                onClick={() => {
                  removeCandidate(item);
                }}
              />
            </span>
          ))}
        </Space>

        {showAddCandidate ? (
          <EditText
            value={newCandidate}
            state="edit"
            cancel={(v) => {
              setShowAddCandidate(false);
            }}
            cb={(v) => {
              addCandidate(v);
            }}
          ></EditText>
        ) : (
          <></>
        )}
      </div>

      {processInstanceId && processInstanceId != "" ? (
        <Variable
          key="processInstanceVar"
          type="ProcessInstance"
          dataId={processInstanceId}
        ></Variable>
      ) : null}

      {executionId && executionId != "" ? (
        <Variable
          key="executionVar"
          type="Execution"
          dataId={executionId}
        ></Variable>
      ) : null}

      {taskId && taskId != "" ? (
        <Variable key="taskVar" type="Task" dataId={taskId}></Variable>
      ) : null}



<Modal
        width={800}
        title="Complete Task"
        open={modalVisibleForCompleteTask}
        footer={null}
        onCancel={closeModalForCompleteTask}
        destroyOnClose={true}
        maskClosable={false}
      >
       <CompleteTask taskId={taskId} onClose={closeModalForCompleteTask}></CompleteTask>
      </Modal>
    </div>
  );
}

export default TaskInfo;
